import React, { Component } from 'react'
import { Card,Button, message,Table,Modal,Select,Switch,Input,Form} from 'antd'
import { ArrowLeftOutlined, } from '@ant-design/icons';
import { connect } from 'react-redux';
import { reqSearchSubjectStudent,reqUpdateStudentScore} from '../../api'
import { saveTeacherAction } from '../../redux/action_creators/user_action';
import {PAGE_SIZE} from '../../config';
import dayjs from 'dayjs';

const { Option } = Select;

const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };
const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 24,
    },
  };

@connect(
    state=>({
        course:state.course
    }),
    {
        saveTeacherList:saveTeacherAction
    }
)
 class Score extends Component {
     state = {
         id:'',
         studentList:[],
         isLoading:true,
         courseName:'',
         courseNum:'',
         isAddVisible:false,
         isChecked:true,
         mark:''
     }
     componentDidMount(){
         //从redux中获取
        const {id } = this.props.match.params;
        this.getContentById(id)
     }

     getContentById = async (courseId) =>{
        let result = await reqSearchSubjectStudent(courseId)
        const { code,data,msg} = result
        if(code === 200){
            if(data.length===0)  message.success(msg,1)
            this.setState({
                studentList:data,
                isLoading:false,
                courseName:data.length>0?data[0].courseName:'',
                courseNum:data.length>0?data[0].courseNum:''
            })
            
        }else{
            message.error(msg,1)      
        } 
     }
     showModelScore=(id)=>{
        this.setState({isAddVisible:true,id})
     }
     changeStatus=()=>{
         const {isChecked} = this.state
         this.setState({isChecked:!isChecked})
     }

     addStudentScore=async(value)=>{
        let {id ,studentList} = this.state
         if(this.state.isChecked){
                console.log(value.level);
                let result =await reqUpdateStudentScore(id,value.level)
                const { code,msg} = result
                if(code === 200){
                    message.success('分数评改成功',1)
                    studentList = studentList.map((item)=>{
                        if(item.id === id) item.mark = value.level
                        return item;
                    })
                    this.setState({studentList,isAddVisible:false})
                    //  this.props.saveContentList(contentList)
                }else{
                    message.error(msg,1)
                }
         }else{
                console.log(value.mark);
                let result =await reqUpdateStudentScore(id,value.mark)
                const { code,msg} = result
                if(code === 200){
                    message.success('分数评改成功',1)
                    studentList = studentList.map((item)=>{
                        if(item.id === id) item.mark = value.mark
                        return item;
                    })
                    this.setState({studentList,isAddVisible:false})
                    //  this.props.saveContentList(contentList)
                }else{
                    message.error(msg,1)
                }
         }
         
     }
    render() {
        const  { studentList,isLoading,courseName,courseNum,isAddVisible,isChecked} = this.state
        const studentColumns = [
            {
              title: '姓名',
              dataIndex: 'username',
              key: 'id',
            },
            {
                title: '学号',
                dataIndex: 'userNum',
                key: 'id',
              },
            {
              title: '邮箱',
              dataIndex: 'email',
              key: 'id',
            },
            {
                title: '生日',
                dataIndex: 'birthday',
                key: 'id',
                render:time=>dayjs(time).format('YYYY年MM月DD日')
            },
            {
              title: '电话',
              dataIndex: 'phone',
              key: 'id',
            },
            {
                title: '选课时间',
                dataIndex: 'createTime',
                key: 'id',
                render:time=>dayjs(time).format('YYYY年MM月DD日  HH:mm:ss')
            },
            {
                title: '性别',
                dataIndex: 'sex',
                key: 'id',
            },
            {
                title: '成绩',
                dataIndex: 'mark',
                key: 'id',
            },
            {title: '操作',
            key: 'id',
            align:'center',
            render:(item)=>{
                return(
                    <div>
                     <Button disabled={(item.mark||item.mark===null)?true:false} type="link" onClick={()=>{this.showModelScore(item.id)}}>评分</Button>
                    </div>
                    )
            }
        },  
          ];
        return (
            <div>
                <Card 
                    title={
                        <div className="left-top">
                            <Button 
                                type="link" 
                                size="small"
                                onClick={()=>{this.props.history.goBack()}} 
                            >
                                <ArrowLeftOutlined className="iconSize"/>
                            </Button>
                            <span>课程评分详情</span>
                        </div>
                    }
                    extra={studentList?<span><span>编号：{courseNum}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>名称：{courseName}</span></span>:''}
                >
                   <Table 
                        dataSource={studentList} 
                        columns={studentColumns}
                        bordered
                        rowKey='id'
                        pagination={{
                            pageSize:PAGE_SIZE,
                        }}
                        loading={ isLoading} 
                    />
                </Card>
                <Modal
                    title="评分数"
                    visible={isAddVisible}
                    onCancel={()=>this.setState({isAddVisible:false})}
                    cancelText={'取消'}
                    okText={'确定'}
                    footer={null}
                    maskClosable={false}
                    width={300}
                    >
                    <Form
                        {...layout}
                        name="basic"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.addStudentScore}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            label="五级制"
                            name="isChecked"
                            checked={isChecked}
                        >
                            <Switch checkedChildren="已启用" unCheckedChildren="未启用" onClick={()=>this.changeStatus()} checked={isChecked} />
                        </Form.Item>
                        {isChecked?
                            <Form.Item
                                label="分数"
                                name="level"
                                rules={[ {required: true,message: '请选择分数等级！'}]}
                            >
                                <Select placeholder="请选择分数" >
                                    <Option key={1} value={'优秀'}>优秀</Option>
                                    <Option key={2} value={'良好'}>良好</Option>
                                    <Option key={3} value={'中等'}>中等</Option>
                                    <Option key={4} value={'及格'}>及格</Option>
                                    <Option key={5} value={'不及格'}>不及格</Option>
                                </Select>
                            </Form.Item> :
                            <Form.Item
                            label="分数"
                            name="mark"
                            rules={[ {required: true,message: '请输入分数！',}, ]}
                        >
                            <Input placeholder="请输入分数" style={{width:'150px'}}  allowClear/>
                        </Form.Item>
                        }
                        <br></br>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" className="login-from-admin">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
export default Score;